<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Ejercicio 6</title>
	<style type="text/css">

	form {
		display: block;
		margin: 0 auto;
		margin-top: 5%;
		width: 570px;
	}

	label {
		display: block;
		margin: 15px;
	}

	input {
		margin-left: 10px;
	}

	.pre {
		display: inline-block;
		max-width: 150px;
		min-width: 140px;
		text-align: center;
		margin-right: 5px;
	}

	.cuadro {
		width: 250px;
		margin: 0 auto;
		margin-left: 10px;
		margin-bottom: 15px;
	}

	#radios {
		display: inline;
	}

	#genero {
		margin-left: 15px;
	}

	.r {
		display: inline;
	}

	#boton {
		max-width: 300px;
		display: block;
		margin: 0 auto;
		margin-top: 25px;
		margin-bottom: 15px;
	}

	#metodo {
		display: block;
		margin: 15px;
		margin-bottom: 20px;
	}

	#post {
		margin-left: 15px;
	}

	/* READ */
	table {
		border: 2px solid black;
		margin: 0 auto;
	}

	tr {
		border: 1px solid black;
	}

	td, th {
		padding: 5px;
	}

	.thead:nth-child(1n) {
		background-color: green;
		color: white;
	}

	table tr:nth-child(2n) {
		background-color: orange;
	}

	table tr:nth-child(2n+1) {
		background-color: #2DA9D2;
	}

	#recargar {
		display: block;
		margin: 0 auto;
		margin-top: 20px;
	}
	/* READ */

	</style>
	<script type="text/javascript">
	var numero, nombre, apellido, telefono, genero, accion;
	var busqueda = 0;

	function cambiar(opcion) {
		var cambio1 = document.getElementById("cambio1");
		var cambio2 = document.getElementById("cambio2");

		if (opcion == 0) {
			cambio1.style.display = "";
			cambio2.style.display = "none";
			busqueda = 0;
			document.getElementById('botonCrear').disabled = "";
		} else {			
			cambio1.style.display = "none";
			cambio2.style.display = "";
			busqueda = 1;
			document.getElementById('botonCrear').disabled = "disabled";
		}

	}

	function llamada(realizar) {

		numero = document.getElementById("numero").value;
		nombre = document.getElementById("nombre").value;
		apellido = document.getElementById("apellido").value;
		telefono = document.getElementById("telefono").value;
		genero = document.formulario.sexo.value;

		if (realizar == 0) {
			crear();
		} else if (realizar == 1) {
			consultar();
		} else if (realizar == 2) {
			actualizar();
		} if (realizar == 3) {
			borrar();
		}

	}

	function crear() {
		if (nombre == "" || nombre.length > 30) {
			alert("El nombre no es correcto");
		} else if  (apellido == "" || apellido.length > 50) {
			alert("El apellido no es correcto");
		} else if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
			alert("El teléfono no es correcto");
		} else {
			var consulta = "js=c&nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono+"&genero="+genero;
			ajax(consulta,'crear');
		}
	}

	function consultar() {
		document.getElementById('ajax').innerHTML = 'Espere mientras se carga la página.';
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "../ej5/control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send("js=r");

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var respuesta = xmlhttp.responseText;
				document.getElementById('ajax').innerHTML = respuesta;
				document.getElementById('ajax').innerHTML += '<input type="button" id="recargar" value="Volver" onclick="volver()">';
			}
		}
	}

	function volver() {
		location.reload();
	}

	function actualizar() {

		if (busqueda == 0) {

			if (nombre == "" || nombre.length > 30) {
				alert("El nombre no es correcto");
			} else if  (apellido == "" || apellido.length > 50) {
				alert("El apellido no es correcto");
			} else if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
				alert("El teléfono no es correcto");
			} else {
				var consulta = "js=una&nombre="+nombre+"&apellido="+apellido+"&telefono="+telefono;
				ajax(consulta,'actualizar');
			}
		} else {

			if (isNaN(numero)) {
				alert("El número de empelado no es correcto");
			} else if (telefono == "" || telefono.length > 11 || isNaN(telefono)) {
				alert("El teléfono no es correcto");
			} else {
				var consulta = "js=une&numero="+numero+"&telefono="+telefono;
				ajax(consulta,'actualizar');
			}
		}

	}

	function borrar() {

		if (busqueda == 0) {

			if (nombre == "" || nombre.length > 30) {
				alert("El nombre no es correcto");
			} else if  (apellido == "" || apellido.length > 50) {
				alert("El apellido no es correcto");
			} else {
				var consulta = "js=dna&nombre="+nombre+"&apellido="+apellido;
				ajax(consulta,'despedir');
			}
		} else {

			if (isNaN(numero)) {
				alert("El número de empelado no es correcto");
			} else {
				var consulta = "js=dne&numero="+numero;
				ajax(consulta,'despedir');
			}
		}

	}

	function ajax(consulta,accion) {
		var xmlhttp = new XMLHttpRequest();

		xmlhttp.open("POST", "../ej5/control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(consulta);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				respuesta(xmlhttp.responseText,accion);
			}
		}

	}

	function respuesta(texto,accion) {

		if (texto == "true") {
			
			if (accion == 'crear') {
				alert("Empleado creado correctamente");
			} else if (accion == 'actualizar') {
				alert("Empleado actualizado correctamente");
			} else if (accion == 'despedir') {
				alert("Empleado despedido correctamente");
			}

			limpiar();
		} else if (texto == "false") {
			if (accion == 'crear') {
				alert("El empleado ya existe");
			} else if (accion == 'actualizar') {
				alert("El empleado no existe");
			} else if (accion == 'despedir') {
				alert("El empleado no existe");
			}
		} else if (texto == "Error de conexión") {
			alert(texto);
		} else {
			alert("Error grave");
			document.writeln(texto);
		}
	}

	function limpiar() {

		document.formulario.reset();
		document.getElementById("numero").style.border = "";
		document.getElementById("postnum").innerHTML = "";

	}

	function comprobar(consulta) {
		var xmlhttp = new XMLHttpRequest();
		numero = document.getElementById("numero").value;
		var consulta = "js=cnum&numero="+numero;

		xmlhttp.open("POST", "../ej5/control.php", true);
		xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlhttp.send(consulta);

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				var texto = xmlhttp.responseText;
				var oculto = document.getElementById("postnum");
				var cuadro = document.getElementById("numero");
				oculto.innerHTML = texto;			
				if (texto == "Existe") {
					oculto.style.color = "blue";
					cuadro.style.border = "";
				} else {
					oculto.style.color = "red";
					cuadro.style.border = "2px inset red";
				}
			}
		}

	}

	</script>
</head>
<body>
	
	<form name="formulario">
		<h1>CRUD de empleados</h1>
		<div id="ajax" name="ajax">
			<fieldset>
				<legend>Datos de usuario</legend>

				<div id="metodo">
					<div id="radios">
						<span class="pre">Selección</span>
						<label class="r">
							<input type="radio" name="opcion" onclick="cambiar(0)" checked='checked'>
							Nombre y apellido
						</label>
						<label class="r"> 
							<input type="radio" name="opcion" onclick="cambiar(1)">
							NumEmp
						</label>
					</div>
				</div>

				<span id="cambio2" style="display: none;">
					<span class="pre">Número de empleado</span>
					<input type="text" id="numero" class="cuadro" onkeyup="comprobar()">
					<span class="post" id="postnum"></span>
				</span>
				<span id="cambio1">
					<span class="pre">Nombre</span>
					<input type="text" id="nombre" class="cuadro">
					<span class="pre">Apellido</span>
					<input type="text" id="apellido" class="cuadro">
				</span>
				<span class="pre">Teléfono</span>
				<input type="text" id="telefono" class="cuadro">				
				<div id="radios">
					<span id="genero" class="pre">Sexo</span>
					<label class="r">
						<input type="radio" name="sexo" value="Hombre" checked='checked'>
						Hombre
					</label>
					<label class="r">
						<input type="radio" name="sexo" value="Mujer">
						Mujer
					</label>
				</div>
				
				<div id="boton">
					<input type="button" value="Crear" onclick="llamada(0)" id="botonCrear">
					<input type="button" value="Consultar" onclick="llamada(1)">
					<input type="button" value="Actualizar" onclick="llamada(2)">
					<input type="button" value="Borrar" onclick="llamada(3)">
				</div>
			</fieldset>			
		</div>
	</form>

</body>
</html>